<template>
  <div class="home">
    <van-nav-bar fixed>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          round
          class="search-btn"
          size="small"
          icon="search"
          @click="$router.push({ path: '/search' })"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- 标签栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="(item, index) in tabs" :key="index" :title="item.name">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了!"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id.toString()"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <!-- 使用插槽 -->
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image fit="cover" lazy-load :src="img" />
                  </van-grid-item>
                </van-grid>
                <!-- 底部额外信息区域 -->
                <div class="meta">
                  <span>{{ item.aut_name }}</span>
                  <span>{{ item.comm_count }}评论</span>
                  <span>{{ item.pubdate | fromNow }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getTabls, getArticles } from './home'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      tabs: [], // 频道管理
      list: [], // 文章列表
      loading: false, // 加载状态
      finished: false, // 是否加载完毕
      refreshing: false, // 下拉刷新
      timestamp: null //默认不给值，发请求的时候获取当前时间戳就可以了
    }
  },
  methods: {
    async onLoad () {
      // 判断是不是下拉刷新
      if (this.refreshing) {
        this.list = []
        // 下拉状态为fasle
        this.refreshing = false
        this.timestamp = null
      }
      // 加载更多数据
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      // console.log(this.timestamp);
      let res = await getArticles({
        channel_id: this.tabs[this.active].id,
        timestamp: this.timestamp
      })

      this.timestamp = res.data.pre_timestamp
      this.list.push(...res.data.data.results)

      //4.加载状态结束
      this.loading = false
      //5.数据全部加载完成
      if (this.list.length >= 100) {
        this.finished = true
      }
    },
    onRefresh () {
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    tabClick () {
      this.list = []
      this.loading = true
      this.onLoad()
    }
  },
  async created () {
    let res = await getTabls()
    // console.log(res);
    this.tabs = res.data.data.channels
  },
  //过滤器
  filters: {
    fromNow (value) {
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.home {
  height: 100vh;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;
  .van-nav-bar {
    background-color: #3296fa;
  }

  // logo区域
  .logo {
    background: url('~@/assets/logo.png') no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  // 搜索按钮
  .search-btn {
    background-color: #5babfb;
    width: 100px;
    font-size: 14px;
    border: none;
    .van-icon {
      color: #fff;
    }
    .van-button__text {
      color: #fff;
    }
  }
  .van-tabs {
    height: 100%;
    padding-top: 44px;
    // tab栏标题
    .van-tabs__wrap {
      position: fixed;
      left: 0;
      right: 30px;
      top: 46px;
    }
    .van-tabs__content {
      overflow-y: scroll;
      height: 100%;
    }
  }
  .van-tab {
    padding: 0 16px;
  }
  .van-tabs__line {
    background-color: #3196fa;
  }
  .meta {
    span {
      margin-right: 10px;
    }
  }
}
</style>
